<template>
  <!-- 使用ElementPlus的上传组件 -->
  <el-upload
    class="image-uploader"
    drag  
    :show-file-list="false"
    :http-request="customUpload"
    :before-upload="beforeUpload"
    :accept="'image/*'"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <!-- 自定义触发区域 -->
    <template #trigger>
      <div class="upload-area">
        <!-- 上传图标 -->
        <el-icon :size="40" class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <!-- 提示文字 -->
        <div class="el-upload__text">
          将图片拖到此处或 <em>点击上传</em>
        </div>
      </div>
    </template>

    <!-- 预览区域（当有图片时显示） -->
    <template v-if="imageUrl" #default>
      <div class="preview-wrapper">
        <!-- 预览图片 -->
        <img :src="imageUrl" class="preview-image" alt="预览图片">
        <!-- 遮罩层（鼠标悬停显示删除按钮） -->
        <div class="preview-mask">
          <span class="preview-actions">
            <!-- 删除图标 -->
            <el-icon @click="handleRemove">
              <Delete />
            </el-icon>
          </span>
        </div>
      </div>
    </template>

    <!-- 底部提示文字 -->
    <template #tip>
      <div class="el-upload__tip">
        支持上传 JPG/PNG 格式图片，大小不超过5MB
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled, Delete } from '@element-plus/icons-vue'
import { uploadImageApi } from '@/api/upload' // 导入封装的上传API

// 响应式变量：存储图片URL
const imageUrl = ref('')

// 自定义上传方法
const customUpload = async (options: any) => {
  // 创建FormData对象
  const formData = new FormData()
  // 添加文件到FormData，字段名需要和后端一致
  formData.append('file', options.file)
  
  try {
    // 调用封装的API方法
    const response = await uploadImageApi(formData)
    imageUrl.value=response.data
    ElMessage.success(response.msg)
    // 触发el-upload的成功回调
    options.onSuccess(response.data)
  } catch (err) {
    // 触发el-upload的错误回调
    options.onError(err)
  }
}

// 上传前校验函数
const beforeUpload = (file: File) => {
  // 类型校验：必须是图片类型
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return false // 阻止上传
  }

  // 大小校验：不超过5MB
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB!')
    return false // 阻止上传
  }

  return true // 允许上传
}

// 上传成功处理函数
const handleSuccess = (response: any) => {
  if (response.code === 200) {
    // 更新预览图URL
    ElMessage.success(response.data)
    imageUrl.value = response.data
    ElMessage.success(response.data)
  }
}

// 上传失败处理函数
const handleError = () => {
  ElMessage.error('上传失败，请检查网络或文件格式')
}

// 删除图片处理
const handleRemove = () => {
  imageUrl.value = '' // 清空预览图URL
}
</script>

<style scoped>

</style>